﻿@namespace BootstrapBlazor.Components
@inherits IdComponentBase

<Responsive OnBreakPointChanged="OnBreakPointChanged" />

<CascadingValue Value="@this" IsFixed>
    <CascadingValue Value="@_state">
        <nav @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleClassString" data-collapse="@CollapseModeString" data-broken="@IsBrokenString">

            @if (_state.IsHorizontal)
            {
                <div class="container-fluid">
                    @ChildContent
                </div>
            }
            else
            {
                @ChildContent

                <div class="navbar-v-dropdown show">
                    <FloatingContainer Id="@($"{Id}_container")"/>
                </div>
            }
        </nav>
    </CascadingValue>
</CascadingValue>

@if (_state.IsVerticalMixin)
{
    <Floating Visible AutoUpdate Anchor="@Id" Placement="@Placement.RightStart" MainOffset="-14" CrossOffset="14"  AxisIndex="@(VerticalZindex + 1)" Class="d-none d-sm-block">
        <Button Color="Color.None" class="p-0 rounded-circle navbar-switch glow" OnClick="@Toggle" IsAsync>
            <i class="@ToggleClassString"></i>
            <Tooltip Placement="Placement.Right" Title="点击切换菜单折叠状态" />
            <div class="switch-pulse">
                <span class="switch-pulse-ring"></span>
            </div>
        </Button>
    </Floating>
}